<template>
  <el-container style="background-color: #fff">
    <el-aside style="padding: 0px 10px 0 0;width:260px; box-sizing: border-box" v-loading="treeLoading">
      <avue-tree :option="treeOption" :data="treeData" @node-click="handleTreeClick" style="height: calc(100% - 40px)"
        ref="treeRef" @save="handleTreeSave" @update="handleTreeUpdate" @del="handleTreeDel"></avue-tree>
    </el-aside>
    <el-main>
      <basic-crud v-model:formData="formData" v-model:search="searchFormData" :option="option" ref="basicCrudRef"
        :beforeOpen="handleBeforeOpen" businessUrl="/permission/deviceController" :apiListParams="apiListParams"
        :apiAddParams="apiListParams">
      </basic-crud>
    </el-main>
  </el-container>
</template>

<script setup>
import { getCrudFunByBaseUrl } from '@/utils/index.js'
import { ElMessage } from 'element-plus'
// 获取左侧树的增删改查接口
const { apiAdd, apiEdit, apiDel, apiRefer } = getCrudFunByBaseUrl('/bd/deviceClassifyController')
const searchFormData = ref({})
const basicCrudRef = ref()
const treeData = ref([])
const formData = ref({})
const treeOption = ref({
  defaultExpandAll: true,
  nodeKey: 'id',
  props: {
    label: 'name',
    value: 'id',
    children: 'children',
  },
  formOption: {
    column: [
      {
        label: '编号',
        prop: 'code',
        search: true,
        rules: [{ required: true, message: '请输入编号', trigger: 'blur' }],
      },
      {
        label: '名称',
        prop: 'name',
        search: true,
        sortable: true,
        rules: [{ required: true, message: '请输入名称', trigger: 'blur' }],
      },
      {
        label: '描述',
        prop: 'des',
      },
      {
        label: '排序',
        prop: 'orderNum',
        type: 'number',
        step: 10
      },
    ],
  }
})
const treeLoading = ref(true)
const handleTreeSave = (parent, data, done, loading) => {
  if (parent.key) {
    data.parentId = parent.key
  } else {
    data.parentId = 'root'
  }
  apiAdd(data).then(res => {
    ElMessage.success('新增成功！')
    getTreeList()
    done()
  }).catch(() => {
    loading()
  })
}

const handleTreeUpdate = (parent, data, done, loading) => {
  apiEdit(data).then(res => {
    ElMessage.success('编辑成功！')
    getTreeList()
    done()
  }).catch(() => {
    loading()
  })
}
const handleTreeDel = (data, done) => {
  const loadingInstance = ElLoading.service({ text: '删除中...' })
  apiDel(data.key).then(res => {
    ElMessage.success('删除成功！')
    getTreeList()
    done()
  }).catch(() => {
    loading()
  }).finally(() => {
    loadingInstance.close()
  })
}
// 获取树结构数据
const getTreeList = async () => {
  treeData.value = await apiRefer({}, treeLoading) || []
}

const treeRef = ref()
const apiListParams = ref({
  deviceClassify: undefined
})
const handleTreeClick = (data) => {
  basicCrudRef.value.pageData.currentPage = 1
  basicCrudRef.value.pageData.pageSize = 20
  apiListParams.value.deviceClassify = data.id
}
getTreeList()

const option = ref({
  menuWidth: 180,
  searchSpan: 8,
  selection: true,
  column: [
    {
      label: "型号/规格",
      prop: "specification",
      search: true,
      sortable: true,
      fixed: true,
      width: 150,
    },
    {
      label: "名称",
      prop: "name",
      sortable: true,
      rules: [{ required: true, message: "名称不能为空" }],
      search: true,
      fixed: true,
      minWidth: 180
    },
    {
      label: "状态",
      prop: "status",
      sortable: true,
      search: true,
      searchType: "select",
      sortField: "status",
      type: "select",
      formatter: (row) => {
        return "Released" == row.status ? "生效" : "编制";
      },
      statusTag: true,
      value: "Editing",
      width: 80,
      statusTypeMap:{
        Released:'success',
        Auditing:'warning',
      }
    },
    {
      label: "设备类型",
      prop: "deviceCategory",
      search: true,
      sortable: true,
      type: "select",
      searchType: "select",
      dicData: [
        {
          label: "非标",
          value: "unStand",
        },
        {
          label: "通用",
          value: "general",
        },
      ],
      width: 100,
    },
    {
      label: "精度/参数",
      prop: "params",
      sortable: true,
      width: 150,
    },
    {
      label: "制造/供应商",
      prop: "supplier",
      sortable: true,
      minWidth: 180
    },
    {
      label: "定检类型",
      prop: "lifeCountType",
      sortable: true,
      type: "select",
      hide: true,
      dicData: [
        {
          label: "使用次数",
          value: "checkByCount",
        },
        {
          label: "使用时间",
          value: "checkByTime",
        },
      ],
      rules: [{ required: true, message: "寿命计算方式不能为空" }],
      formatter: (row) => {
        return row.lifeCountTypeText;
      },
      width: 100,
    },
    {
      label: "密级",
      prop: "secret",
      sortable: true,
      width: 90,
      type: "select",
      dicData: [
        {
          label: "非密",
          value: 10,
        },
        {
          label: "秘密",
          value: 20,
        },
        {
          label: "机密",
          value: 30,
        },
      ],
    },
    {
      label: "品牌",
      prop: "brand",
      sortable: true,
      width: 150,
    },
    {
      label: "材质",
      prop: "material",
      sortable: true,
      width: 150,
    },
    {
      label: "单价",
      type: "number",
      prop: "priceOfUnit",
      precision: 8,
      rules: [{ type: "number", message: "单价必须为数字值", trigger: "blur" }],
      width: 100,
    },
    {
      label: "最小预警库存量",
      type: "number",
      prop: "minQuantity",
      precision: 0,
      rules: [{ type: "number", message: "必须为数字值", trigger: "blur" }],
      width: 110,
    },
    {
      label: "最大预警库存量",
      type: "number",
      prop: "maxQuantity",
      precision: 0,
      rules: [{ type: "number", message: "必须为数字值", trigger: "blur" }],
      width: 110,
    },
    {
      label: "适用产品",
      prop: "applyProduct",
      sortable: true,
      width: 150,
    },
    {
      label: "寿命",
      prop: "materialLife",
      sortable: true,
      width: 150,
    },
    {
      label: "备注",
      prop: "des",
      type: 'textarea',
      span: 24,
      sortable: true,
      minWidth: 150
    }
  ]
})

const handleBeforeOpen = (done, type, loading) => {
  if (!apiListParams.value.deviceClassify && type === 'add') {
    return ElMessage.warning('请选择左侧树节点进行操作！')
  }
  done()
}



</script>

<style lang="scss" scoped></style>
